<script setup lang="ts">
import {reactive, ref} from "vue";
import tableList from "@/components/tableList/tableList.vue";
import {payConfirm, getPayInfo} from "@/api/payment";
import {ElMessage, ElMessageBox} from "element-plus";
import {usePermissions} from "@/hooks/web/usePermissions";

const {permissions, fetchPermissions} = usePermissions()
const props = defineProps({
  drawerVisible: Boolean,
  device: Boolean,
})
onMounted(() => {
  fetchPermissions();
})
let requestLoading = ref(false)
let tableData = ref([])
let innerVisible = ref(false)
let confirmLoad = ref(false)
let payFormRef = ref('')
let payForm = reactive({
  student_id: '',
  project: '',
  money: '',
  type: '1',
  id: '',
  desc: '',
  confirm_time: ''
})
let payInfo = reactive({
  school: '',
  name: '',
  id: ''
})
let tableHeader = [
  {label: '缴费项目', prop: 'name'},
  {label: '缴费金额', prop: 'money'},
  {label: '缴费状态', prop: 'pay_status'},
  {label: '支付方式', prop: 'pay_method'},
  {label: '支付日期', prop: 'pay_date'},
  {label: '附件', prop: 'down_url', type: 'fileList', width: '100px'},
  {label: '备注', prop: 'remark'},
  {label: '入账时间', prop: 'confirm_time'}
]
const tableOptions = {
  label: '操作',
  width: '150px',
  value: 0,
  options: [
    {
      label: '待确认',
      method: (row) => {
        handleConfirm(row)
      },
      icon: 'right',
      show: (row) => {
        return row.confirm === '0' && permissions.control
      },
    },
    {
      label: '审批中',
      icon: 'More',
      show: (row) => {
        return row.confirm === '0' && !permissions.control
      },
    },
    {
      label: '已确认',
      icon: 'Check',
      show: (row) => {
        return row.confirm === '1'
      },
    },
    {
      label: '已驳回',
      icon: 'Close',
      show: (row) => {
        return row.confirm === '2'
      },
    }
  ]
}
const payRules = {
  confirm_time: [{message: '请选择入账时间', trigger: 'change', required: true}],
  desc: [{required: true, message: '请输入驳回原因', trigger: 'blur'}]
}

const handleConfirm = (row) => {
  payForm = Object.assign(payForm, {project: row.name, money: row.money, id: row.id, student_id: payInfo.id})
  innerVisible.value = true
}

const handleConfirmPay = () => {
  payFormRef.value.validate(valid => {
    if (valid) {
      ElMessageBox.confirm('一旦确认无法更改,是否提交 ?', '提示', {type: 'warning'}).then(async () => {
        confirmLoad.value = true;
        let res = await payConfirm(payForm);
        confirmLoad.value = false;
        if (res) {
          ElMessage({message: '提交成功', type: 'success'})
          handleCancel()
          await fetchInfo();
        }
      })
    }
  })
}

const handleCancel = () => {
  payFormRef.value.resetFields();
  innerVisible.value = false
}
const handleClose = () => {
  emit('handleClose')
}

const fetchInfo = async () => {
  let res = await getPayInfo({student_id: payInfo.id})
  if (res) {
    tableData.value = res.data
  }
}

let emit = defineEmits(['handleClose'])
defineExpose({fetchInfo, payInfo})

</script>
<template>
  <el-dialog v-model="props.drawerVisible" title="缴费信息" :width="props.device  ?'90%':'60%'" draggable
             :before-close="handleClose">
    <el-dialog
        draggable
        v-model="innerVisible"
        :width="props.device  ?'80%':'30%'"
        title="财务操作"
        append-to-body
    >
      <el-form :model="payForm" label-width="90px" ref="payFormRef" :rules="payRules"
               v-loading="confirmLoad"
      >
        <el-form-item label="学生姓名:">
          {{ payInfo.name }}
        </el-form-item>
        <el-form-item label="缴费项目:">
          <span>{{ payForm.project }}</span>
        </el-form-item>
        <el-form-item label="缴费金额:">
          <span>{{ payForm.money }}</span>
        </el-form-item>
        <el-form-item label="审批类型:" prop="type">
          <el-radio-group v-model="payForm.type">
            <el-radio label="1">已入账</el-radio>
            <el-radio label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="入账时间:" v-if="payForm.type=== '1'"  prop="confirm_time">
          <el-date-picker
              style="width: 200px"
              v-model="payForm.confirm_time"
              type="datetime"
              format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
              placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="驳回原因:" v-if="payForm.type==='2'" prop="desc">
          <el-input v-model="payForm.desc" type="textarea" :rows="4" placeholder="请输入驳回原因"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleConfirmPay">提 交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-form v-loading="requestLoading" :model="payForm" class="demo-form-inline" label-width="80px"
             label-position="left"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="报考院校:">
            {{ payInfo.school }}
          </el-form-item>
          <el-form-item label="学生姓名:">
            {{ payInfo.name }}
          </el-form-item>
          <tableList :table-data="tableData"
                     :table-options="tableOptions"
                     :table-header="tableHeader"
                     :table-height="400"
          >
          </tableList>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
